<template>
  <a-button type="primary" @click="addCure" style="margin-bottom: 10px;margin-left: 5px">添加治疗记录</a-button>
  <a-table :columns="columns" :data-source="state.cures" :rowKey="record=>record.id" bordered  :scroll="{ x: 1500, y: 300 }" style="height: 100%">
    <template #action="record">
      <div>
        <a-popconfirm
            title="确认删除吗?"
            ok-text="Yes"
            cancel-text="No"
            @confirm="confirm(record.record.id)"
            @cancel="cancel"
        >
          <a-button href="#">删除</a-button>
        </a-popconfirm>
        <a-button type="primary" @click="edit(record.record.id)" style="float: right">编辑</a-button>
      </div>
    </template>
  </a-table>

  <a-modal
      :title="Title"
      v-model:visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk(state.cure)"
  >
    <a-form :model="state.cure" :label-col="{span: 4}" :wrapper-col="{ span: 16 }">
      <a-form-item label="id" v-if="state.cure.id == null" hidden>
        <a-input v-model:value="state.cure.id"  style="width: 300px;"/>
      </a-form-item>
      <a-form-item label="id" v-else>
        <a-input v-model:value="state.cure.id" disabled="true"  style="width: 300px;"/>
      </a-form-item>
      <a-form-item label="医院id">
        <a-input v-model:value="state.cure.hospitalId"  style="width: 300px;"/>
      </a-form-item>
      <a-form-item label="疾病id">
        <a-input v-model:value="state.cure.conditionId"  style="width: 300px;"/>
      </a-form-item>
      <a-form-item label="患者id">
        <a-input v-if="state.cure.id==null" v-model:value="state.cure.patientId"  style="width: 300px;"/>
        <a-input v-else v-model:value="state.cure.patientId" disabled="true"  style="width: 300px;"/>
      </a-form-item>
      <a-form-item label="患病年龄">
        <a-input v-model:value="state.cure.presentAge" style="width: 300px;"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import { defineComponent, onMounted, reactive, ref } from "vue";
import {
  reqGetAllCure,
  reqGetCureById,
  reqUpdateCureById,
  reqDeleteCureById,
  reqAddCure
} from "../api/index";
import { message } from "ant-design-vue";
const columns = [
  {
    title: "id",
    dataIndex: "id",
    key: "id",
    align: 'center',
  },
  {
    title: "医院id",
    dataIndex: "hospitalId",
    key: "hospitalId",
    align: 'center',
  },
  {
    title: "疾病id",
    dataIndex: "conditionId",
    key: "conditionId",
    align: 'center',
  },
  {
    title: "患者id",
    dataIndex: "patientId",
    key: "patientId",
    align: 'center',
  },
  {
    title: "患病年龄",
    dataIndex: "presentAge",
    key: "presentAge",
    align: 'center',
  },
  {
    title: "最后更新时间",
    dataIndex: "updateTime",
    key: "updateTime",
    align: 'center',
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    key: "createTime",
    align: 'center',
  },
  {
    title: "操作",
    dataIndex: "",
    width: 200,
    key: "x",
    fixed: 'right',
    align: 'center',
    slots: {
      customRender: "action",
    },
  },
];
export default defineComponent({
  setup() {
    const Title = ref('')
    const state = reactive({
      cures: [],
      cure: {},
      type: "",
    });
    const modalText = ref("Content of the modal");
    const visible = ref(false);
    const confirmLoading = ref(false);
    const addCure = () => {
      state.type = "add";
      Title.value = "添加治疗记录";
      visible.value = true;
      state.cure = {};
    };
    const handleOk = async (cure) => {
      modalText.value = "please wait for sometime";
      confirmLoading.value = true;
      if (state.type==="update") {
        let result = await reqUpdateCureById(cure);
        if (result.code === 200) {
          visible.value = false;
          confirmLoading.value = false;
          let result = await reqGetAllCure();
          state.cures = result.data;
          state.cure = {};
        }
      } else if (state.type==="add") {
        let result = await reqAddCure(cure)
        if (result.code === 200) {
          visible.value = false;
          confirmLoading.value = false;
          let result = await reqGetAllCure();
          state.cures = result.data;
          state.cure = {};
        }
      }
    };
    const edit = async (id) => {
      let result = await reqGetCureById(id);
      state.type = "update";
      Title.value = "修改治疗记录";
      state.cure = result.data;
      visible.value = true;
    };
    const confirm = async (id) => {
      let result = await reqDeleteCureById(id);
      if (result.code === 200) {
        message.success("删除成功");
        let result = await reqGetAllCure();
        state.cures = result.data;
      }
    };

    const cancel = (e) => {
      console.log(e);
      message.error("Click on No");
    };
    onMounted(async () => {
      let result = await reqGetAllCure();
      console.log(result)
      state.cures = result.data;
    });
    return {
      Title,
      state,
      columns,
      edit,
      modalText,
      visible,
      confirmLoading,
      handleOk,
      confirm,
      cancel,
      addCure
    };
  },
});
</script>
